import React, { Component } from 'react';
import {
  View,
  Text,
  TextInput,
  Button,
  StyleSheet,
  ScrollView,
  Image,
  TouchableOpacity,
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import Icon from 'react-native-vector-icons/AntDesign';
import { DOMAIN_URL } from "../../util/api";

class UserIconList extends Component {
  constructor(props: any) {
    console.log(props);

    super(props);
    // this.state = {
    //   users: props.users || [],
    // };
  }

  render() {
    const { users } = this.props || []
    console.log('users ', users);

    return users?.length > 0 ? <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center' }}>
      {users.map((d, idx) => (
        <View
          key={`icon` + idx}
          style={{
            // alignItems: 'flex-start',
            justifyContent: 'center',
            margin: 4,
          }}>
          <Image
            style={{ width: 60, height: 60, alignSelf: 'center', borderRadius: 30 }}
            source={{
              uri: `${DOMAIN_URL}/file/images/touxiang.jpg`
            }}
          />
          <View style={{}}>
            <Text numberOfLines={1} style={{
              width: 72,
              overflow: 'hidden',
              textAlign: 'center',
              fontWeight: '500'
            }}>{d.userName}</Text>
          </View>
        </View>
      ))}
    </View> : <View style={{ justifyContent: 'center', alignItems: 'center', margin: 8 }}>
      <Text>无</Text>
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 5,
  },
  input: {
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 5,
    marginBottom: 10,
    padding: 10,
  },
  button: {
    fontSize: 16,
    color: 'blue',
    marginBottom: 10,
  },
  image: {
    width: 75,
    height: 75,
    marginBottom: 10,
  },
});

export default UserIconList;
